<template>
  <div class="register-container">
    <div class="register-box">
      <!-- 标题只在步骤1显示 -->
      <div class="register-title" v-if="activeStep === 0">
        <h2>员工注册</h2>
        <p>Employee Registration</p>
      </div>

      <!-- 步骤条 -->
      <el-steps :active="activeStep" finish-status="success" class="steps">
        <el-step title="基本信息" />
        <el-step title="人脸录入" />
        <el-step title="完成注册" />
      </el-steps>

      <!-- 步骤1：基本信息表单 -->
      <el-form
        v-if="activeStep === 0"
        ref="basicFormRef"
        :model="basicForm"
        :rules="basicRules"
        label-width="100px"
        class="register-form"
        validate-on-rule-change="false"
        :hide-required-asterisk="true"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="basicForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="basicForm.gender" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="basicForm.departmentId" placeholder="请选择部门" style="width: 100%">
            <el-option label="行政部" value="1" />
            <el-option label="人力资源部" value="2" />
            <el-option label="财务部" value="3" />
            <el-option label="技术部" value="4" />
            <el-option label="市场部" value="5" />
            <el-option label="销售部" value="6" />
            <el-option label="客服部" value="7" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="basicForm.position" placeholder="请输入职位" />
        </el-form-item>
        <el-form-item label="入职时间" prop="hireDate">
          <el-date-picker v-model="basicForm.hireDate" type="date" placeholder="请选择入职时间" />
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="basicForm.phoneNumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="basicForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="basicForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="basicForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
            show-password
          />
        </el-form-item>
      </el-form>

      <!-- 步骤2：人脸录入 -->
      <div v-if="activeStep === 1" class="face-register">
        <div class="employee-info-card" v-if="employeeNo">
          <div class="employee-info-title">
            <el-icon class="success-icon"><Check /></el-icon>
            基本信息注册成功
          </div>
          <div class="employee-info-content">
            <div class="employee-no">
              <span class="label">您的员工编号：</span>
              <span class="value">{{ employeeNo }}</span>
            </div>
            <div class="employee-tip">请牢记此编号，用于后续登录系统</div>
          </div>
        </div>
        <div class="camera-container">
          <video
            ref="videoRef"
            class="camera-preview"
            autoplay
            playsinline
            v-show="!capturedImage"
          ></video>
          <img v-if="capturedImage" :src="capturedImage" class="capture-preview" alt="captured" />
          <div class="face-mask" v-show="!capturedImage">
            <div class="face-frame"></div>
            <div class="tips">请将面部对准框内</div>
          </div>
        </div>
        <div class="camera-controls">
          <template v-if="!capturedImage">
            <el-button
              type="primary"
              :icon="VideoCameraFilled"
              @click="startCamera"
              v-if="!cameraStarted"
              class="camera-button"
            >
              开启摄像头
            </el-button>
            <el-button 
              type="primary" 
              :icon="Camera" 
              @click="takePhoto" 
              v-else
              class="camera-button"
            > 
              拍照 
            </el-button>
          </template>
          <template v-else>
            <el-button @click="retake">重新拍照</el-button>
            <el-button type="primary" @click="uploadFaceImage">确认使用</el-button>
          </template>
        </div>
      </div>

      <!-- 步骤3：注册完成 -->
      <div v-if="activeStep === 2" class="register-success">
        <el-result icon="success" title="注册成功" sub-title="您已完成注册，现在可以登录系统了">
          <template #extra>
            <el-button type="primary" @click="goToLogin">去登录</el-button>
          </template>
        </el-result>
      </div>

      <!-- 底部按钮 -->
      <div class="form-buttons" v-if="activeStep !== 2">
        <el-button type="primary" @click="nextStep" v-if="activeStep === 0" :loading="submitting">
          注册
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Camera, VideoCameraFilled, Check } from '@element-plus/icons-vue'
import { register, faceRegister } from '@/api/login'

const router = useRouter()
const activeStep = ref(0)
const basicFormRef = ref(null)
const videoRef = ref(null)
const cameraStarted = ref(false)
const capturedImage = ref(null)
const stream = ref(null)
const submitting = ref(false)
const employeeNo = ref('') // 存储注册成功后返回的员工编号

// 基本信息表单
const basicForm = reactive({
  name: '',
  gender: '',
  departmentId: '',
  position: '',
  hireDate: '',
  phoneNumber: '',
  email: '',
  password: '',
  confirmPassword: '',
})

// 表单验证规则
const basicRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: '' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: '' },
  ],
  gender: [{ required: true, message: '请选择性别', trigger: '' }],
  departmentId: [{ required: true, message: '请选择部门', trigger: '' }],
  position: [{ required: true, message: '请输入职位', trigger: '' }],
  hireDate: [{ required: true, message: '请选择入职时间', trigger: '' }],
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: '' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: '' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: '' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: '' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: '' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: '' },
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: '' },
    {
      validator: (rule, value, callback) => {
        if (value !== basicForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: '',
    },
  ],
}

// 下一步
const nextStep = async () => {
  if (activeStep.value === 0) {
    // 手动清除之前可能存在的验证信息
    basicFormRef.value.clearValidate()
    
    // 验证基本信息表单
    await basicFormRef.value.validate(async (valid) => {
      if (valid) {
        submitting.value = true
        try {
          // 发送注册请求
          const res = await register(basicForm)
          if (res.data.success) {
            // 保存返回的员工编号
            employeeNo.value = res.data.employeeNo
            ElMessage.success(`基本信息注册成功，您的员工编号为: ${employeeNo.value}`)
            activeStep.value++
          } else {
            // 使用接口返回的错误信息
            ElMessage.error(res.data.message || '注册失败')
          }
        } catch (error) {
          console.error('注册错误:', error)
          // 检查是否有接口返回的错误信息
          if (error.response && error.response.data && error.response.data.message) {
            ElMessage.error(error.response.data.message)
          } else if (error.code === 'ERR_NETWORK') {
            ElMessage.error('网络连接失败，请检查后端服务是否启动')
          } else {
            ElMessage.error('注册失败，请稍后重试')
          }
        } finally {
          submitting.value = false
        }
      }
    })
  } else if (activeStep.value === 1) {
    // 验证是否已录入人脸
    if (!capturedImage.value) {
      ElMessage.warning('请完成人脸录入')
      return
    }
    
    // 提示用户人脸录入成功
    ElMessage.success('人脸录入成功，即将跳转到登录页面')
    
    // 关闭摄像头流
    stopCamera()
    
    // 延迟1秒后跳转到登录页面
    setTimeout(() => {
      router.push('/login')
    }, 1000)
  }
}

// 开启摄像头
const startCamera = async () => {
  try {
    stream.value = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: false,
    })
    if (videoRef.value) {
      videoRef.value.srcObject = stream.value
      cameraStarted.value = true
    }
  } catch (error) {
    ElMessage.error('无法访问摄像头，请检查权限设置')
    console.error('摄像头访问错误：', error)
  }
}

// 拍照
const takePhoto = () => {
  const video = videoRef.value
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  capturedImage.value = canvas.toDataURL('image/jpeg')
}

// 重新拍照
const retake = () => {
  capturedImage.value = null
}

// 去登录
const goToLogin = () => {
  router.push('/login')
}

// 关闭摄像头
const stopCamera = () => {
  if (stream.value) {
    stream.value.getTracks().forEach((track) => track.stop())
    stream.value = null
    cameraStarted.value = false
  }
}

// 将Base64图片转换为二进制Blob
const base64ToBlob = (base64Data) => {
  // 移除Data URL前缀
  const base64WithoutPrefix = base64Data.substr(base64Data.indexOf(',') + 1)
  const byteString = atob(base64WithoutPrefix)
  const ab = new ArrayBuffer(byteString.length)
  const ia = new Uint8Array(ab)
  
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  
  return new Blob([ab], { type: 'image/jpeg' })
}

// 上传人脸图片
const uploadFaceImage = async () => {
  if (!capturedImage.value || !employeeNo.value) {
    ElMessage.warning('请先完成基本信息注册并拍照')
    return
  }
  
  submitting.value = true
  try {
    // 将Base64格式的图片转换为二进制Blob
    const imageBlob = base64ToBlob(capturedImage.value)
    
    // 创建FormData对象并添加数据
    const formData = new FormData()
    formData.append('employeeNo', employeeNo.value)
    formData.append('faceImageFile', imageBlob, 'face.jpg')
    
    // 调用人脸注册API
    const res = await faceRegister(formData)
    
    if (res.data.success) {
      ElMessage.success('人脸信息录入成功')
      // 人脸录入成功后自动进入下一步
      nextStep()
    } else {
      // 使用接口返回的错误信息
      ElMessage.error(res.data.message || '人脸录入失败')
    }
  } catch (error) {
    console.error('人脸录入错误:', error)
    // 检查是否有接口返回的错误信息
    if (error.response && error.response.data && error.response.data.message) {
      ElMessage.error(error.response.data.message)
    } else if (error.code === 'ERR_NETWORK') {
      ElMessage.error('网络连接失败，请检查后端服务是否启动')
    } else {
      ElMessage.error('人脸录入失败，请稍后重试')
    }
  } finally {
    submitting.value = false
  }
}

// 表单初始化后的处理
onMounted(() => {
  // 确保表单初始创建时不触发验证
  if (basicFormRef.value) {
    basicFormRef.value.clearValidate()
  }
})

// 组件销毁时关闭摄像头
onBeforeUnmount(() => {
  stopCamera()
})
</script>

<style scoped>
* {
  font-family: "Poppins", sans-serif, "微软雅黑", "黑体";
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.register-container {
  height: 100vh;
  width: 100vw;
  background-image: url('@/assets/login-bg.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.register-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.register-box {
  position: relative;
  width: 800px;
  max-height: 85vh; /* 限制最大高度为视窗高度的85% */
  padding: 30px 40px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出 */
}

.register-box:hover {
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
}

.register-title h2 {
  font-size: 28px;
  color: #fff;
  margin: 0 0 10px;
}

.register-title p {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

.steps {
  margin-bottom: 20px;
}

/* 步骤条样式定制 */
.register-box :deep(.el-steps) {
  --el-text-color-primary: #fff;
  --el-text-color-regular: rgba(255, 255, 255, 0.7);
}

.register-box :deep(.el-step__title) {
  color: #fff;
}

.register-box :deep(.el-step__icon-inner) {
  color: #333;
}

.register-box :deep(.el-step__line) {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 表单样式调整 */
.register-form {
  max-width: 600px;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto; /* 添加垂直滚动条 */
  padding-right: 10px; /* 为滚动条留出空间 */
}

.register-box :deep(.el-form-item) {
  margin-bottom: 28px; /* 增加表单项之间的间距 */
}

.register-box :deep(.el-form-item__error) {
  position: absolute;
  top: 100%;
  padding-top: 4px;
  color: #ff6b6b; /* 更明显但不刺眼的红色 */
  font-size: 12px;
  line-height: 1;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明背景，防止与下方输入框重叠时难以辨认 */
  padding: 2px 6px;
  border-radius: 2px;
}

.register-box :deep(.el-form-item__label) {
  color: #fff;
  padding-bottom: 8px; /* 增加标签与输入框的距离 */
}

.register-box :deep(.el-input__wrapper),
.register-box :deep(.el-select__wrapper),
.register-box :deep(.el-date-editor.el-input) {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
}

.register-box :deep(.el-input__inner),
.register-box :deep(.el-select__input) {
  color: #fff;
}

.register-box :deep(.el-input__wrapper:hover),
.register-box :deep(.el-select__wrapper:hover) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.register-box :deep(.el-input__wrapper.is-focus),
.register-box :deep(.el-select__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #fff inset;
}

.register-box :deep(.el-input__prefix-inner i) {
  color: #fff;
}

/* 日期选择器和下拉菜单样式 */
.register-box :deep(.el-date-editor) {
  width: 100%; /* 确保日期选择器宽度与其他输入框一致 */
}

.register-box :deep(.el-select__popper),
.register-box :deep(.el-picker__popper) {
  background-color: rgba(60, 60, 70, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.register-box :deep(.el-select-dropdown__item),
.register-box :deep(.el-date-picker) {
  color: #fff;
}

.register-box :deep(.el-select-dropdown__item.selected) {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-weight: bold;
}

.register-box :deep(.el-select-dropdown__item.hover),
.register-box :deep(.el-select-dropdown__item:hover) {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 修复提示信息在日期选择器和下拉框的显示 */
.register-box :deep(.el-form-item.is-error .el-input__wrapper),
.register-box :deep(.el-form-item.is-error .el-select .el-input__wrapper),
.register-box :deep(.el-form-item.is-error .el-date-editor) {
  box-shadow: 0 0 0 1px #ff6b6b inset;
}

/* 自定义滚动条样式 */
.register-form::-webkit-scrollbar {
  width: 6px;
}

.register-form::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.register-form::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.register-form::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 人脸识别区域样式 */
.face-register {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 500px; /* 确保有足够的高度 */
}

.face-register .employee-info-card {
  margin-bottom: 20px;
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.face-register .employee-info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  align-items: center;
}

.face-register .employee-info-title .success-icon {
  color: #28a745;
  margin-right: 10px;
  font-size: 20px;
}

.face-register .employee-info-content {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px 15px;
  border-radius: 5px;
}

.face-register .employee-no {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.face-register .employee-no .label {
  font-weight: bold;
  color: #fff;
}

.face-register .employee-no .value {
  margin-left: 5px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  font-family: monospace;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
}

.face-register .employee-tip {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-top: 5px;
}

/* 确保摄像头按钮不被遮挡 */
.camera-button {
  position: relative;
  z-index: 100;
}

.camera-controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 100;
}

.camera-container {
  width: 100%;
  height: 350px; /* 增加高度 */
  min-height: 320px; /* 设置最小高度 */
  background: #000;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 5;
  margin: 20px 0; /* 增加上下边距 */
}

.camera-container .camera-preview,
.camera-container .capture-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-container .face-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.camera-container .face-mask .face-frame {
  width: 250px; /* 减小尺寸 */
  height: 250px; /* 减小尺寸 */
  border: 2px solid #fff;
  border-radius: 50%;
  margin-bottom: 15px;
}

.camera-container .face-mask .tips {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* 按钮样式 */
.form-buttons {
  margin-top: 20px;
  padding-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.register-box :deep(.el-button) {
  background: #fff;
  color: #333;
  border: none;
  border-radius: 40px;
  padding: 12px 25px;
  font-size: 16px;
  transition: all 0.3s;
}

.register-box :deep(.el-button:hover) {
  background: #ffffea;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.register-box :deep(.el-button.is-text) {
  background: transparent;
  color: #fff;
}

.register-box :deep(.el-button.is-text:hover) {
  background: rgba(255, 255, 255, 0.1);
}

/* 注册成功样式 */
.register-success {
  text-align: center;
  padding: 20px;
  overflow-y: auto;
  max-height: 65vh;
}

.register-box :deep(.el-result__title),
.register-box :deep(.el-result__subtitle) {
  color: #fff;
}

.register-box :deep(.el-result__icon) {
  color: #fff;
}

/* 也对人脸注册区域应用滚动样式 */
.face-register::-webkit-scrollbar {
  width: 6px;
}

.face-register::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.face-register::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.face-register::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 响应式布局 */
@media (max-width: 860px) {
  .register-box {
    width: 90%;
    padding: 30px 20px;
  }
}

@media (max-width: 576px) {
  .register-box {
    width: 95%;
    padding: 20px 15px;
  }
  
  .camera-container {
    height: 280px;
  }
  
  .camera-container .face-mask .face-frame {
    width: 200px;
    height: 200px;
  }
}

/* 响应式样式优化 */
@media (max-height: 800px) {
  .register-box {
    max-height: 90vh;
    padding: 20px;
  }
  
  .register-title {
    margin-bottom: 15px;
  }
  
  .register-title h2 {
    font-size: 24px;
  }
  
  .register-title p {
    font-size: 14px;
  }
  
  .steps {
    margin-bottom: 15px;
  }
  
  .register-box :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  
  .camera-container {
    height: 280px;
  }
  
  .camera-container .face-mask .face-frame {
    width: 200px;
    height: 200px;
  }
}

/* 选择框文本颜色修复 */
.register-box :deep(.el-select .el-input__inner) {
  color: #fff !important;
}

.register-box :deep(.el-select .el-select__placeholder) {
  color: rgba(255, 255, 255, 0.7) !important;
}

.register-box :deep(.el-select-dropdown__item) {
  color: #fff !important;
}

.register-box :deep(.el-select-dropdown) {
  background-color: rgba(60, 60, 70, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.register-box :deep(.el-popper__arrow::before) {
  background-color: rgba(60, 60, 70, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 日期选择器文本颜色修复 */
.register-box :deep(.el-date-editor .el-input__inner) {
  color: #fff !important;
}

.register-box :deep(.el-date-editor .el-input__prefix-inner svg) {
  color: #fff !important;
}

.register-box :deep(.el-date-editor .el-input__placeholder) {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 日期面板样式 */
.register-box :deep(.el-picker__popper) {
  background-color: rgba(60, 60, 70, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.register-box :deep(.el-date-picker) {
  --el-datepicker-text-color: #fff;
  --el-datepicker-off-text-color: rgba(255, 255, 255, 0.6);
  --el-datepicker-header-text-color: #fff;
  --el-datepicker-icon-color: #fff;
  --el-datepicker-border-color: rgba(255, 255, 255, 0.3);
  --el-datepicker-inner-border-color: rgba(255, 255, 255, 0.2);
  --el-datepicker-inrange-bg-color: rgba(255, 255, 255, 0.1);
  --el-datepicker-inrange-hover-bg-color: rgba(255, 255, 255, 0.2);
  --el-datepicker-active-color: #fff;
  --el-datepicker-hover-text-color: #fff;
  color: #fff;
}

.register-box :deep(.el-date-picker th),
.register-box :deep(.el-date-picker__header-label),
.register-box :deep(.el-date-table td.next-month .el-date-table-cell__text),
.register-box :deep(.el-date-table td.prev-month .el-date-table-cell__text) {
  color: rgba(255, 255, 255, 0.7);
}

.register-box :deep(.el-date-table td.today .el-date-table-cell__text) {
  color: #fff;
  font-weight: bold;
}

.register-box :deep(.el-date-table td.current:not(.disabled) .el-date-table-cell__text) {
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}

/* 当处于人脸录入步骤时，让内容区域占据更多空间 */
.register-box .steps {
  margin-bottom: 25px;
}

/* 当activeStep为1时调整步骤条与内容的间距 */
.register-box[v-if="activeStep === 1"] .steps {
  margin-bottom: 10px;
}
</style>
